<template>
	<view>
		<view class="cu-bar bg-white search fixed">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input :value="name" type="text" placeholder="搜索商品" confirm-type="search" @confirm="search" maxlength="10"></input>
			</view>
		</view>
		<view class="text-lg padding margin-top-100">
		</view>
		<view class="cu-list menu-avatar">
		    <view class="cu-item" v-for="(item,index) in products" :key="index">
				<view class="cu-avatar radius" :style="'background-image:url('+item.url+'_250_250);'" @click="toDetail(item.id)"></view>
				<view class="tag1" v-if="item.tag==1"><text>热卖</text></view>
				<view class="tag2" v-else-if="item.tag===2"><text>新品</text></view>
				<view class="tag3" v-else-if="item.tag==3"><text>精品</text></view>
				<view class="tag4" v-else-if="item.tag==4"><text>推荐</text></view>
		        <view class="content">
		            <view class="title" @click="toDetail(item.id)">
						<text class="text-lg">{{item.name}}</text>
		            </view>
					<view class="margin-top-10 oh">
						<view class="fl cu-tag line-green radius">
							已售{{item.sales}}件
						</view>
						<view class="actions">
							<text class="fr margin-right text-grey">剩余 {{item.totalStock}}件</text>
						</view>
					</view>
		            <view class="bg-white price">
					   <view class="text-red text-xl fl margin-right">
						   ￥{{item.price}}
					   </view>						
					   <view class="text-gray text-sm fl line-through">
						   ￥{{item.originalPrice}}
					   </view>
		            </view>
		        </view>
				<view class="icon" @click="toDetail(item.id)">
					<text class="lg cuIcon-roundaddfill"></text>
				</view>
			</view>
		</view>
		<dixian :show="!hasMore"/>
	</view>
</template>

<script>
	import {ProductService} from "@/api/ProductService.js"
	import dixian from "@/components/dixian/dixian.vue"
	export default {
		components:{dixian},
		data() {
			return {
				currentPage:1,hasMore:true,products:[],name:undefined
			}
		},
		onPullDownRefresh() {
			this.init();
			this.listProduct();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.currentPage++;
			this.listProduct();
		},
		onLoad(options) {
			this.name=options.name;
			this.init();
			this.listProduct();
		},
		methods: {
			search(event){
				this.name=event.detail.value;
				this.init();
				this.listProduct();
			},
			init(){
				this.hasMore=true;this.currentPage=1;
				this.products=[];
			},
			toDetail(productId){
				uni.navigateTo({
					url:"/pages/product/detail?productId="+productId
				});
			},
			listProduct(){
				if(this.hasMore){
					const param={pageNo:this.currentPage,pageSize:10,name:this.name};
					ProductService.list(param).then((res)=>{
						this.hasMore=res.data.length>0;
						this.products=this.products.concat(res.data);
					});
				}
			}
		}
	}
</script>

<style lang="scss">
.cu-list{
	.cu-item{
		height:250rpx !important;
		margin-bottom: 30rpx;
		margin-top:20rpx !important;
		.cu-avatar{width: 250rpx;height: 250rpx;}
		.tag1{position: absolute;left: 30rpx;top: 0;background: #bd4cbf;padding: 10rpx 25rpx;color: #ffffff;}
		.tag2{position: absolute;left: 30rpx;top: 0;background: #39b54a;padding: 10rpx 25rpx;color: #ffffff;}
		.tag3{position: absolute;left: 30rpx;top: 0;background: #ff6a00;padding: 10rpx 25rpx;color: #ffffff;}
		.tag4{position: absolute;left: 30rpx;top: 0;background: #ed4217;padding: 10rpx 25rpx;color: #ffffff;}
		.content{
			position: relative !important;
			left: 0rpx !important;
			height: 100%;
			.price{
				clear:both;
				margin-top:20rpx;
				position: absolute;
				bottom: 0px;
				.line-through{
					text-decoration: line-through;
				}
			}
		}
		.icon{
			position: absolute;
			right: .5em;
			color: #ff6a00 !important;
			font-size: 2.5em;
			bottom: -5%;
		}
		&:after {
			border-bottom: 0rpx !important;
		}
	}
}
</style>
